<template>
	<view class="minePage">
		<view class="flex-colume-start mine-bg">
			<view style="margin-top: 74rpx; position: relative;">
				<image class="photo1" :src="userModel.avatar"></image>
				<image @click="photoBtnClick()" src="/static/mine/add-red.png" class="addBtn"></image>
			</view>
			<view style="margin-top: 25rpx; font-size: 28rpx; color: #0A1E3C;">{{userModel.nickname}}</view>
			<view class="flex-colume-start box1">
				<image style="width: 660rpx; height: 139rpx;" src="/static/mine/mine-bg2.png"></image>
				<view class="b12" @click="itemClick(0)"></view>
				<view class="b12" @click="itemClick(1)" style="left: 210rpx;"></view>
				<view class="b12" @click="itemClick(2)" style="left: 380rpx;"></view>
				<view class="b12" @click="itemClick(3)" style="left: 540rpx;"></view>
			</view>
			<view class="flex-colume-start box2">
				<image style="width: 660rpx; height: 685rpx;" src="/static/mine/mine-bg3.png"></image>
				<view class="b12" @click="itemClick1(0)"></view>
				<view class="b12" @click="itemClick1(1)" style="left: 275rpx;"></view>
				<view class="b12" @click="itemClick1(2)" style="left: 500rpx;"></view>
				
				<view class="b12" @click="itemClick1(3)" style="top: 250rpx;"></view>
				<view class="b12" @click="itemClick1(4)" style="left: 275rpx; top: 250rpx;"></view>
				<view class="b12" @click="itemClick1(5)" style="left: 500rpx; top: 250rpx;"></view>
				
				<view class="b12" @click="itemClick1(6)" style="top: 470rpx;"></view>
				<view class="b12" @click="itemClick1(7)" style="left: 275rpx; top: 470rpx;"></view>
				<view class="b12" @click="itemClick1(8)" style="left: 500rpx; top: 470rpx;"></view>
				<!-- <view class="b12" style="left: 540rpx;"></view> -->
			</view>
			<view style="height: 40rpx;"></view>
			<view style="height: calc(env(safe-area-inset-bottom) + 49px);"></view>
			
		</view>
	
		<custom-tab-bar :selected="4"></custom-tab-bar>
	</view>
</template>

<script>
	import {userInfo,uploadImgUrl,editUserInfo} from '@/api/api'
	export default {
		data() {
			return {
				userModel:{}
			}
		},
		onShow(){
			this.requestInfo()
			
		},
		methods: {
			itemClick(index){
				var url = ''
				if (index == 0){
					url = '/pages/mine/mineOrder'
				}
				if (index == 1 || index == 2){
					url = '/pages/mine/mineCollect?index='+index
				}
				if (index == 3){
					url = '/pages/mine/minInfo'
				}
				uni.navigateTo({
					url:url
				})
				
			},
			itemClick1(index){
				
			},
			photoBtnClick(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						var path = res.tempFilePaths[0]
						this.uploadImg(path)
					}
				
				})
			},
			uploadImg(path){
				uni.showLoading({
					mask:true
				})
				uni.uploadFile({
					url: uploadImgUrl, // 仅为示例，非真实的接口地址
					filePath: path,
					name: 'uploadImg',
					formData: {
						user: 'test'
					},
					success: (res) => {
						if (res.data){
							var data = JSON.parse(res.data)
							var url = data.data.imgPath
							this.requestUptInfo({avatar:url})
							
						}
						console.log('图片',res)
					}
				});
				
			},
			requestInfo(){
				userInfo().then(res=>{
					if (res.code == 200){
						this.userModel = res.data.info
					}
				})
			},
			requestUptInfo(params){
				editUserInfo(params).then(res=>{
					if (res.code == 200){
						this.requestInfo()
					}
					this.showSimpleMessage(res.message)
					
					setTimeout(res=>{
						uni.hideLoading()
					},2000)
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.minePage{
		font-size: 0px;
		.photo1{
			
			width: 211rpx;
			height: 211rpx;
			border-radius: 211rpx;
			border: 1px solid white;
			background-color: rgb(230, 230, 230);
		}
		.addBtn{
			position: absolute;
			left: 140rpx;
			top: 170rpx;
			width: 48rpx;
			height: 48rpx;
			box-sizing: border-box;
			padding: 5rpx;
		}
		.box1{
			position: relative;
			margin-top: 70rpx;
			width: 690rpx;
			background-color: white;
		    border-radius: 16rpx;
			box-sizing: border-box;
			.b12{
				position: absolute;
				left: 48rpx;
				top: 19rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}
		.box2{
			position: relative;
			margin-top: 30rpx;
			width: 690rpx;
			background-color: white;
			border-radius: 16rpx;
			box-sizing: border-box;
			.b12{
				position: absolute;
				left: 48rpx;
				top: 40rpx;
				width: 140rpx;
				height: 160rpx;
			}
		}
	}
	.mine-bg{
		width: 750rpx;
		// height: 519rpx;
		background: url('https://app.yiheshuyuan.cn/static/weixin/xcxPic/mine-bg1.png');
		background-size: 100% 519rpx;
		background-repeat: no-repeat;
	}

</style>
